<template>
  <div class="collection-detail">
    <!-- 顶部导航 -->
    <div class="top-nav">
      <a-button type="text" @click="goBack">
        <ArrowLeftOutlined />
        返回
      </a-button>
      <h1>{{ collection?.title }}</h1>
    </div>

    <!-- 合集信息 -->
    <div class="collection-header">
      <div class="collection-cover">
        <img :src="collection?.cover" :alt="collection?.title" />
      </div>
      <div class="collection-info">
        <h2>{{ collection?.title }}</h2>
        <p class="description">{{ collection?.description }}</p>
        
        <div class="creator-info">
          <a-avatar :src="collection?.creator.avatar" />
          <span class="creator-name">{{ collection?.creator.name }}</span>
        </div>
        
        <div class="collection-stats">
          <span class="stat-item">
            <VideoCameraOutlined />
            {{ collection?.videoCount }}个视频
          </span>
          <span class="stat-item">
            <ClockCircleOutlined />
            {{ collection?.totalDuration }}
          </span>
          <span class="stat-item">
            <EyeOutlined />
            {{ formatNumber(collection?.views || 0) }}次观看
          </span>
        </div>
        
        <div class="collection-tags">
          <a-tag v-for="tag in collection?.tags" :key="tag" color="blue">
            {{ tag }}
          </a-tag>
        </div>
        
        <div class="collection-actions">
          <a-button type="primary" size="large" @click="startLearning">
            开始学习
          </a-button>
          <a-button size="large" @click="toggleFavorite">
            <HeartOutlined v-if="!isFavorite" />
            <HeartFilled v-else style="color: #ff4d4f" />
            {{ isFavorite ? '已收藏' : '收藏' }}
          </a-button>
          <a-button size="large" @click="shareCollection">
            <ShareAltOutlined />
            分享
          </a-button>
        </div>
      </div>
    </div>

    <!-- 视频列表 -->
    <div class="video-list">
      <div class="list-header">
        <h3>视频列表</h3>
        <div class="list-actions">
          <a-select v-model:value="sortBy" style="width: 120px" @change="handleSortChange">
            <a-select-option value="order">按顺序</a-select-option>
            <a-select-option value="duration">按时长</a-select-option>
            <a-select-option value="views">按播放量</a-select-option>
          </a-select>
        </div>
      </div>
      
      <div class="videos">
        <div 
          v-for="(video, index) in sortedVideos" 
          :key="video.id" 
          class="video-item"
          :class="{ 'playing': currentVideoId === video.id }"
          @click="playVideo(video)"
        >
          <div class="video-thumbnail">
            <img :src="video.thumbnail" :alt="video.title" />
            <div class="video-duration">{{ video.duration }}</div>
            <div class="play-overlay">
              <PlayCircleOutlined />
            </div>
          </div>
          
          <div class="video-info">
            <div class="video-number">{{ index + 1 }}</div>
            <div class="video-details">
              <h4 class="video-title">{{ video.title }}</h4>
              <p class="video-desc">{{ video.description }}</p>
              <div class="video-meta">
                <span class="views">{{ formatNumber(video.views) }}次观看</span>
                <span class="date">{{ video.uploadDate }}</span>
              </div>
            </div>
            
            <div class="video-status">
              <CheckCircleOutlined v-if="video.watched" style="color: #52c41a" />
              <ClockCircleOutlined v-else style="color: #999" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习进度 -->
    <div class="learning-progress">
      <a-card title="学习进度">
        <a-progress 
          :percent="learningProgress" 
          :format="(percent: number) => `${percent}%`"
          status="active"
        />
        <div class="progress-stats">
          <span>已学习 {{ watchedCount }}/{{ totalVideos }} 个视频</span>
          <span>预计还需 {{ estimatedTime }} 完成</span>
        </div>
      </a-card>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { message } from 'ant-design-vue'
import {
  ArrowLeftOutlined,
  VideoCameraOutlined,
  ClockCircleOutlined,
  EyeOutlined,
  HeartOutlined,
  HeartFilled,
  ShareAltOutlined,
  PlayCircleOutlined,
  CheckCircleOutlined
} from '@ant-design/icons-vue'

const route = useRoute()
const router = useRouter()

// 合集数据
const collection = ref({
  id: 1,
  title: 'Java基础入门到精通',
  description: '从零开始学习Java编程，包含基础语法、面向对象、集合框架等核心知识。本合集涵盖了Java编程的各个方面，适合初学者和有一定基础的开发者。',
  cover: 'https://via.placeholder.com/400x250/1890ff/ffffff?text=Java基础',
  videoCount: 25,
  totalDuration: '15小时',
  views: 12500,
  likes: 890,
  comments: 156,
  tags: ['Java', '编程基础', '面向对象', '集合框架'],
  creator: {
    name: '张老师',
    avatar: 'https://via.placeholder.com/32x32'
  }
})

// 视频列表
const videos = ref([
  {
    id: 1,
    title: '第1课：Java开发环境搭建',
    description: '介绍Java开发环境的搭建，包括JDK安装、IDE配置等',
    thumbnail: 'https://via.placeholder.com/160x90/1890ff/ffffff?text=第1课',
    duration: '15:30',
    views: 3200,
    uploadDate: '2024-01-10',
    watched: true
  },
  {
    id: 2,
    title: '第2课：Java基础语法',
    description: '学习Java的基本语法，包括变量、数据类型、运算符等',
    thumbnail: 'https://via.placeholder.com/160x90/52c41a/ffffff?text=第2课',
    duration: '22:15',
    views: 2800,
    uploadDate: '2024-01-11',
    watched: true
  },
  {
    id: 3,
    title: '第3课：控制流程语句',
    description: '掌握Java的控制流程语句，包括if、switch、循环等',
    thumbnail: 'https://via.placeholder.com/160x90/722ed1/ffffff?text=第3课',
    duration: '18:45',
    views: 2500,
    uploadDate: '2024-01-12',
    watched: false
  },
  {
    id: 4,
    title: '第4课：面向对象编程基础',
    description: '介绍面向对象编程的基本概念，包括类、对象、封装等',
    thumbnail: 'https://via.placeholder.com/160x90/fa8c16/ffffff?text=第4课',
    duration: '25:20',
    views: 2200,
    uploadDate: '2024-01-13',
    watched: false
  },
  {
    id: 5,
    title: '第5课：继承与多态',
    description: '深入学习面向对象编程的继承和多态特性',
    thumbnail: 'https://via.placeholder.com/160x90/eb2f96/ffffff?text=第5课',
    duration: '30:10',
    views: 2000,
    uploadDate: '2024-01-14',
    watched: false
  }
])

// 状态管理
const currentVideoId = ref(1)
const isFavorite = ref(false)
const sortBy = ref('order')

// 计算属性
const sortedVideos = computed(() => {
  const sorted = [...videos.value]
  
  switch (sortBy.value) {
    case 'duration':
      return sorted.sort((a, b) => parseDuration(b.duration) - parseDuration(a.duration))
    case 'views':
      return sorted.sort((a, b) => b.views - a.views)
    default:
      return sorted
  }
})

const watchedCount = computed(() => {
  return videos.value.filter(video => video.watched).length
})

const totalVideos = computed(() => {
  return videos.value.length
})

const learningProgress = computed(() => {
  return Math.round((watchedCount.value / totalVideos.value) * 100)
})

const estimatedTime = computed(() => {
  const remainingVideos = totalVideos.value - watchedCount.value
  const avgDuration = 20 // 平均20分钟
  const totalMinutes = remainingVideos * avgDuration
  
  if (totalMinutes < 60) {
    return `${totalMinutes}分钟`
  } else {
    const hours = Math.floor(totalMinutes / 60)
    const minutes = totalMinutes % 60
    return minutes > 0 ? `${hours}小时${minutes}分钟` : `${hours}小时`
  }
})

// 方法
const goBack = () => {
  router.back()
}

const startLearning = () => {
  const firstUnwatched = videos.value.find(video => !video.watched)
  if (firstUnwatched) {
    playVideo(firstUnwatched)
  } else {
    playVideo(videos.value[0])
  }
}

const playVideo = (video: any) => {
  currentVideoId.value = video.id
  message.success(`开始播放：${video.title}`)
  // 这里应该跳转到视频播放页面
  // router.push(`/video/${video.id}`)
}

const toggleFavorite = () => {
  isFavorite.value = !isFavorite.value
  message.success(isFavorite.value ? '已添加到收藏' : '已取消收藏')
}

const shareCollection = () => {
  message.info('分享功能开发中...')
}

const handleSortChange = (value: string) => {
  sortBy.value = value
}

const formatNumber = (num: number) => {
  if (num >= 10000) {
    return (num / 10000).toFixed(1) + '万'
  }
  return num.toString()
}

const parseDuration = (duration: string) => {
  const parts = duration.split(':')
  return parseInt(parts[0]) * 60 + parseInt(parts[1])
}

onMounted(() => {
  const collectionId = route.params.id
  console.log('加载合集ID:', collectionId)
  // 这里应该根据ID加载合集数据
})
</script>

<style scoped>
.collection-detail {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px;
}

.top-nav {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.top-nav h1 {
  margin: 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.collection-header {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 32px;
  margin-bottom: 32px;
  padding: 24px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.collection-cover img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  border-radius: 8px;
}

.collection-info h2 {
  margin: 0 0 12px 0;
  font-size: 24px;
  font-weight: 600;
  color: #333;
}

.description {
  margin: 0 0 16px 0;
  color: #666;
  line-height: 1.6;
}

.creator-info {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.creator-name {
  font-size: 14px;
  color: #333;
  font-weight: 500;
}

.collection-stats {
  display: flex;
  gap: 16px;
  margin-bottom: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 14px;
  color: #666;
}

.collection-tags {
  margin-bottom: 24px;
}

.collection-actions {
  display: flex;
  gap: 12px;
}

.video-list {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #f0f0f0;
}

.list-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.videos {
  max-height: 600px;
  overflow-y: auto;
}

.video-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  cursor: pointer;
  transition: background-color 0.3s;
  border-bottom: 1px solid #f0f0f0;
}

.video-item:hover {
  background: #f8f9fa;
}

.video-item.playing {
  background: #e6f7ff;
  border-left: 4px solid #1890ff;
}

.video-thumbnail {
  position: relative;
  width: 160px;
  height: 90px;
  flex-shrink: 0;
}

.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 6px;
}

.video-duration {
  position: absolute;
  bottom: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.7);
  color: white;
  padding: 2px 6px;
  border-radius: 2px;
  font-size: 12px;
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s;
  border-radius: 6px;
}

.video-item:hover .play-overlay {
  opacity: 1;
}

.play-overlay .anticon {
  font-size: 32px;
  color: white;
}

.video-info {
  display: flex;
  align-items: center;
  gap: 16px;
  flex: 1;
}

.video-number {
  width: 40px;
  height: 40px;
  background: #f0f0f0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  color: #666;
  flex-shrink: 0;
}

.video-details {
  flex: 1;
}

.video-title {
  margin: 0 0 4px 0;
  font-size: 16px;
  font-weight: 500;
  color: #333;
}

.video-desc {
  margin: 0 0 8px 0;
  color: #666;
  font-size: 14px;
  line-height: 1.4;
}

.video-meta {
  display: flex;
  gap: 16px;
  font-size: 12px;
  color: #999;
}

.video-status {
  flex-shrink: 0;
}

.learning-progress {
  margin-top: 24px;
}

.progress-stats {
  display: flex;
  justify-content: space-between;
  margin-top: 12px;
  font-size: 14px;
  color: #666;
}

:deep(.ant-progress-text) {
  font-weight: 600;
}
</style>
